<template>
  <div class="login">
    <el-form
      :model="form"
      status-icon
      ref="form"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="账号" prop="pass">
        <el-input type="text" v-model="form.userText" autocomplete="off">
        </el-input>
      </el-form-item>
      <el-form-item label="密码" prop="checkPass">
        <el-input type="password" v-model="form.passWord" autocomplete="off">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 服务器拿用户数据接口
import { getApi } from "@/api/loginApi";
// 服务器发送用户数据接口
import { postApi } from "@/api/loginApi";
export default {
  data() {
    return {
      // 服务器用户数据
      list: [],
      // 表单输入值
      form: {
        userText: "",
        passWord: "",
      },
    };
  },
  // 向服务器请求登录的账号并赋值给list
  async mounted() {
    let ret = await getApi();
    this.list = ret.data;
    console.log(this.list);
  },
  methods: {
    submitForm() {},
  },
};
</script>

<style lang='scss' scoped>
.login {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  padding-right: 77px;
  border: 2px solid #000;
  width: 500px;
  height: 300px;
  margin: 0 auto;
  margin-top: 12%;
  border-radius: 12px;
}
form {
  width: 100%;
}
button {
  width: 60%;
  margin-left: 60px;
}
</style>